<template>
  <div>
    <!-- header -->
    <div>
      <van-nav-bar title="IT 头条" fixed>
        <template #right>
          <van-icon name="search" size="0.48rem" @click="$router.push('/Search')"/>
        </template>
      </van-nav-bar>
    </div>
    <!-- 头部导航 -->
    <div class="main">
      <van-tabs v-model="channelId" animated sticky offset-top="1.226667rem" @change="channelChangeFn">
        <van-tab v-for="item in userChannels" :title="item.name" :key="item.id" :name="item.id">
          <ArticleList :channelId="channelId"/>
        </van-tab>
      </van-tabs>

      <van-icon name="plus" size="0.3733333rem" class="moreChannels" @click="showPopup"/>
    </div>

    <van-popup v-model="show" get-container class="channel_popup">
      <ChannelEdit 
        :userChannels="userChannels" 
        :unCheckChannelList="unCheckChannelList" 
        @addChannelEV="addChannelEV"
        @removeChannelEV="removeChannelEV"
        @closeEV="closeEV"
        ref="editRef"
        v-model="channelId"
      />
    </van-popup>
  </div>
</template>

<script>
import ArticleList from '@/components/ArticleList'
import ChannelEdit from '@/components/ChannelEdit'
import { getUserChannelsAPI, getAllChannelsAPI, updateChannelsAPI, removeTheChannelAPI } from '@/utils/api'
export default {
  data() {
    return {
      channelId: 0,
      userChannels: [],
      allChannels:[],
      show: false,
      channelScrollTObj: {}
    }
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  created() {
    this.getUserChannels()
    this.getAllChannels()
  },
  computed: {
    unCheckChannelList() {
      const newArr = this.allChannels.filter(bigObj => {
        const index = this.userChannels.findIndex(smallObj => {
          return smallObj.id === bigObj.id
        })
        if(index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  },
  methods: {
    //获取用户频道
    async getUserChannels() {
      const res = await getUserChannelsAPI()
      // console.log(res);
      this.userChannels = res.data.data.channels
    },
    //获取所有频道
    async getAllChannels() {
      const res = await getAllChannelsAPI()
      this.allChannels = res.data.data.channels
    },
    showPopup() {
      this.show = true;
    },
    //添加频道
    async addChannelEV(channelObj) {
      this.userChannels.push(channelObj)

      const newArr = this.userChannels.filter(obj =>  obj.id !==0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = {... obj}
        delete newObj.name
        newObj.seq = index
        return newObj
      });
      //把最新的数组发送给后台
      await updateChannelsAPI({
        channels: theNewArr
      })
      // console.log(res);
    },
    //删除频道
    async removeChannelEV(channelObj) {
      const index = this.userChannels.findIndex(obj => obj.id === channelObj.id)
      this.userChannels.splice(index, 1)

      await removeTheChannelAPI({
        channelId: channelObj.id
      })
      // console.log(res);
    },
    closeEV() {
      this.show = false
      this.$refs.editRef.isEdit = false
    },
    channelChangeFn() {
      //tab切换后，设置滚动条位置
      this.$nextTick(()=>{
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
        document.body.scrollTop = this.channelScrollTObj[this.channelId]
      })
    },
    scrollFn() {
      //谷歌浏览器内核，和安卓浏览器内置内核不同
      //获取scrollTop方式不同
      //谷歌浏览器用的时html的scrollTop
      //有的浏览器用的是body的srcollTop
      //需要做兼容
      //同时保存当前频道的滚动距离
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  // 只有使用keep-alive的组件才有这2个生命周期
  activated() {
    window.addEventListener('scroll', this.scrollFn)
    //window和document，监听网页滚动的事件
    //html标签获取scrollTop，滚动的距离，和设置滚动的位置
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },
  deactivated() {
    window.addEventListener('scroll', this.scrollFn)
  },
};
</script>

<style scoped lang="less">

.main {
  padding-top: 44px;
}

/* // 设置 tabs 容器的样式 */
::v-deep .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* // 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}

.channel_popup {
  width: 100vw;
  height: 100vh;
}
// 如果想给100%, 要先给html和body设置100%
// vw和vh是css3新出的单位, 参考浏览器窗口的百分比
</style>